<template>
  <div class="content-wrap micro-gas">
    <div class="content-box">
      <div class="content-left">
        <content-left />
      </div>
      <div class="content-right">
        <content-right />
      </div>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import ContentLeft from './components/ContentLeft'
import ContentRight from './components/ContentRight'
const { mapActions } = createNamespacedHelpers('microGas')

export default {
  name: 'micro-gas',
  components: {
    ContentLeft,
    ContentRight
  },
  beforeDestroy() {
    this.clearStore()
  },
  methods: {
    ...mapActions(['clearStore'])
  }
}
</script>
<style lang="less" scoped>
.content-wrap {

  .content-box {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .content-left,
  .content-right {
    position: absolute;
    top: 0;
    bottom: 0;
  }

  .content-left {
    top: 0;
    left: 0;
    padding-left: 10px;
    width: 25%;
    overflow: hidden;
  }

  .content-right {
    left: 25%;
    right: 0;
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
  }
}
</style>
